<template>
  <div ref="container" class="bg">
    <px-button class="close" @click="handleClose">关闭</px-button>

    <div class="canvas-container">
      <div
        class="preview-canvas"
        :style="{
          ...getCanvasStyle(canvasStyleData),
          width: changeStyleWithScale(canvasStyleData.width) + 'px',
          height: changeStyleWithScale(canvasStyleData.height) + 'px'
        }"
      >
        <ComponentWrapper v-for="(item, index) in copyData" :key="index" :config="item" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useComponent } from "@visual/stores";
import { getCanvasStyle, changeStyleWithScale, $ } from "@visual/utils";
import { cloneDeep } from "@pureadmin/utils";
import ComponentWrapper from "./ComponentWrapper.vue";
// import { toPng } from "html-to-image";

defineProps({
  isScreenshot: {
    type: Boolean,
    default: false
  }
});

const { canvasStyleData, componentData } = useComponent();
const copyData = cloneDeep(componentData);

const emit = defineEmits(["close"]);
function handleClose() {
  emit("close");
}

// function htmlToImage() {
//   toPng($(".preview-canvas"))
//     .then(dataUrl => {
//       const a = document.createElement("a");
//       a.setAttribute("download", "screenshot");
//       a.href = dataUrl;
//       a.click();
//     })
//     .catch(error => {
//       console.error("oops, something went wrong!", error);
//     })
//     .finally(handleClose);
// }
</script>

<style lang="scss" scoped>
.bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 20px;
  overflow: auto;
  background: rgb(0 0 0 / 50%);

  .canvas-container {
    width: calc(100% - 40px);
    height: calc(100% - 120px);
    overflow: auto;

    .preview-canvas {
      position: relative;
      margin: auto;
      background: #fff;
    }
  }

  .close {
    position: absolute;
    top: 20px;
    right: 20px;
  }
}
</style>
